<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
            var v2arr=  document.getElementById("tab_title").getElementsByTagName("div");
            var v3arr=  document.getElementById("tab_content").children;
        for(var i=0;i<v2arr.length;i++){
       v2arr[i].aa=i;
       v2arr[i].onmouseover=function(){
       v3arr[this.aa].style.display='block';
      for(var j=0;j<v3arr.length;j++){
        if(j!=this.aa){
            v3arr[j].style.display='none';
         this.setAttribute("class","li_bg"+this.aa);
        }
    }
};
    v2arr[i].onmouseout=function(){
        this.removeAttribute("class");
    }
}
        }

    </script>
    <style>
        .title{
            margin-left: 150px;
        }

        .title div:first-child{
            background-image:url("images1/pic_fun_adm.gif");
            background-repeat: no-repeat;
        }
        #tab_title  .li_bg0{
            background-image: url("images1/pic_fun_adm_hover.gif");
            color: #009999;
        }
        .title div:nth-child(2){
            background-image:url("images1/pic_fun_crm.gif");
            background-repeat: no-repeat;
        }
        #tab_title  .li_bg1{
            background-image: url("images1/pic_fun_crm_hover.gif");
            color: #009999;
        }
        .title div:nth-child(3){
            background-image:url("images1/pic_fun_project.gif");
            background-repeat: no-repeat;
        }
        #tab_title  .li_bg2{
            background-image: url("images1/pic_fun_project_hover.gif");
            color: #009999;
        }
        .title div:nth-child(4){
            background-image:url("images1/pic_fun_k.gif");
            background-repeat: no-repeat;
        }
        #tab_title  .li_bg3{
            background-image: url("images1/pic_fun_k_hover.gif");
            color: #009999;
        }
        .title div:nth-child(5){
            background-image:url("images1/pic_fun_mobile.gif");
            background-repeat: no-repeat;
        }
        #tab_title  .li_bg4{
            background-image: url("images1/pic_fun_mobile_hover.gif");
            color: #009999;
        }
        .title div{
            float: left;
            width: 150px;
            height: 210px;
            margin-left: 50px;
            cursor: pointer;
            text-align: center;
            font-size: 23px;
            font-weight: 500;
            line-height: 350px;
        }
        #tab_content>div:not(.first){
            display: none;
        }
        #tab_content>div{
            width: 1000px;
            height: 273px;
            border-right: 1px solid darkgray;
            border-left: 1px solid darkgray;
            border-bottom: 1px solid darkgray;
            clear: both;
            margin-left: 180px;
            background: rgb(252,252,252);
            position: absolute;
            top: 210px;
        }
        #tab_title .colo{
            color: #009999;
        }
        #tab_content .show{
            display: block;
        }
.line{
   position: relative;
    top: -18px;
}

        #tab_content>div>div{
            width: 249px;
            height: 255px;
            border-right: 1px dashed darkgray;
            float: left;
        }
        #tab_content>div>div:last-child{
            border-right: none;
        }
        #tab_content>div>div img{
            margin-left: 50px;
        }
        #tab_content>div>div span{
            display: block;
            text-align: center;
        }
        #tab_content>div>div span:nth-child(2){
            font-size: 23px;
            font-weight: 500;
            margin-top: 20px;
        }
        #tab_content>div>div span:nth-child(3){
            font-size: 13px;
            color: darkgray;
            font-family: '微软雅黑';
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="title" id="tab_title">
    <div>
        A类选项
    </div>

    <div>
        B类选项
    </div>

    <div>
        C类选项
    </div>

    <div>
        D类选项
    </div>

    <div>
        E类选项
    </div>
</div>



<div id="tab_content">
   <div class="first" >
       <img src="images1/line_select_001.gif" class="line">
       <div>
           <img src="images1/pic_fun_adm_detailed_001.gif">
           <span>自定义门户</span>
           <span>个性化设置桌面门户，可根据需<br>要创建功能模块组别；全面掌握...</span>
       </div>
       <div>
           <img src="images1/pic_fun_adm_detailed_002.gif">
           <span>智能流程</span>
           <span>根据企业模式与业务需求，轻<br>松、智能的对流程节点、处理方...</span>
       </div>
       <div>
           <img src="images1/pic_fun_adm_detailed_003.gif">
           <span>即时通讯</span>
           <span>集成即时通讯工具，闲暇时置于<br>桌面右下角；出现待办事宜时...</span>
       </div>
       <div>
           <img src="images1/pic_fun_adm_detailed_004.gif">
           <span>人力资源</span>
           <span>建立企业的人才资源库，以备不<br>时之需；实现对人才信息的多维...</span>
       </div>
   </div>


    <div>
        <img src="images1/line_select_002.gif" class="line">
        <div>
            <img src="images1/pic_fun_crm_detailed_001.gif">
            <span>客户管理</span>
            <span>创建企业的客户资源库，维护客<br>户的综合信息；及时、定期跟进...</span>
        </div>
        <div>
            <img src="images1/pic_fun_crm_detailed_002.gif">
            <span>销售管理</span>
            <span>提供多样化的销售管理机制，实<br>现销售过程的流程控制与维护...</span>
        </div>
        <div>
            <img src="images1/pic_fun_crm_detailed_003.gif">
            <span>合同管理</span>
            <span>统一管理合同信息，形成企业的<br>知识库；提供应用插件，实现合...</span>
        </div>
        <div>
            <img src="images1/pic_fun_crm_detailed_004.gif">
            <span>供应商管理</span>
            <span>建立企业的供应商资源，完善企<br>业供应链；在实际的业务操作...</span>
        </div>
    </div>

    <div>
        <img src="images1/line_select_003.gif" class="line">
        <div>
            <img src="images1/pic_fun_project_detailed_001.gif">
            <span>计划任务</span>
            <span>在线、实时创建维护项目计划，<br>并可向他人发起项目任务，指...</span>
        </div>
        <div>
            <img src="images1/pic_fun_project_detailed_002.gif">
            <span>甘特图</span>
            <span>在线编辑项目甘特图，可与专业<br>工具媲美，而且操作更为简单...</span>
        </div>
        <div>
            <img src="images1/pic_fun_project_detailed_003.gif">
            <span>项目汇报</span>
            <span>定期汇报项目的最新进展，将汇<br>报与具体的项目进行绑定；领导...</span>
        </div>
        <div>
            <img src="images1/pic_fun_project_detailed_004.gif">
            <span>工作负荷</span>
            <span>自动提取项目计划、任务中的员<br>工工作量，以不同的颜色标尺员...</span>
        </div>
    </div>

    <div>
        <img src="images1/line_select_004.gif" class="line">
        <div>
            <img src="images1/pic_fun_k_detailed_001.gif">
            <span>文件柜</span>
            <span>创建个人文件柜，将个人的重要<br>文件存储到平台随时随地查看...</span>
        </div>
        <div>
            <img src="images1/pic_fun_k_detailed_002.gif">
            <span>个人网盘</span>
            <span>平台提供的个人网盘，由员工个<br>人进行管理，可根据需要创建不...</span>
        </div>
        <div>
            <img src="images1/pic_fun_k_detailed_003.gif">
            <span>文件共享</span>
            <span>员工可将个人网盘中的文件与他<br>人共享，实现资源文件在企业内...</span>
        </div>
        <div>
            <img src="images1/pic_fun_k_detailed_004.gif">
            <span>权限控制</span>
            <span>以用户、用户组、部门为单位进<br>行严密的权限设置，为秘密文件...</span>
        </div>
    </div>

    <div>
        <img src="images1/line_select_005.gif" class="line">
        <div>
            <img src="images1/pic_fun_mobile_detailed_001.gif">
            <span>通讯录</span>
            <span>企业通讯录，无需手动录入，自<br>动加载平台员工的联系方式；可...</span>
        </div>
        <div>
            <img src="images1/pic_fun_mobile_detailed_002.gif">
            <span>移动审批</span>
            <span>即使不在电脑前，也无需等待。<br>通过手机端的移动审批可快速的...</span>
        </div>
        <div>
            <img src="images1/pic_fun_mobile_detailed_003.gif">
            <span>日程安排</span>
            <span>制定个人的日程安排，支持对周<br>期性日程的批量添加，并可设置...</span>
        </div>
        <div>
            <img src="images1/pic_fun_mobile_detailed_004.gif">
            <span>定位签到</span>
            <span>外出无法签到，也不再是难事<br>通过手机端即可实现快速的签...</span>
        </div>
    </div>
</div>
</body>
</html>